<template>
  <div class="user-edit-container">
    <!-- Header 区域 -->
    <van-nav-bar
      title="编辑资料"
      left-arrow
      @click-left="backFn"
      fixed
    />

    <!-- 用户资料 -->
    <van-cell-group class="action-card">
      <van-cell title="头像" is-link center>
        <template #default>
          <van-image
            round
            class="avatar"
            :src="$store.state.userPhoto"
            @click="$refs.iptFile.click()"
          />
          <input
            type="file"
            ref="iptFile"
            v-show="false"
            accept="image/*"
            @change="onFileChange"
          />
        </template>
      </van-cell>
      <van-cell
        title="名称"
        is-link
        :value="userInfo.name"
        @click="isShowName = true"
      />
      <van-cell
        title="性别"
        is-link
        :value="userInfo.gender === 1 ? '男' : '女'"
      />
      <van-cell
        title="生日"
        is-link
        :value="userInfo.birthday"
        @click="isShowBirthday = true"
      />
    </van-cell-group>
    <!-- 修改名称对话框 -->
    <van-dialog
      v-model="isShowName"
      title="修改名称"
      show-cancel-button
      @confirm="updateName"
    >
      <van-field v-model="userInfo.name" input-align="center" />
    </van-dialog>
    <!-- 修改生日对话框 -->
    <van-dialog v-model="isShowBirthday" :show-confirm-button="false">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="updateBirthday"
        @cancel="isShowBirthday = false"
      />
    </van-dialog>
  </div>
</template>

<script>
import { getUserInfo, changeUserPhoto, updateUserInfo } from '@/api'
import { Toast } from 'vant'
export default {
  name: 'UserEdit',
  data () {
    return {
      userInfo: {}, // 用户信息
      isShowName: false, // 名字对话框显示状态
      isShowBirthday: false, // 生日对话框显示状态
      minDate: new Date(1999, 1, 1),
      maxDate: new Date(),
      currentDate: new Date(2021, 0, 17)
    }
  },
  // 获取用户信息
  created () {
    this.getUserInfo()
  },
  methods: {
    // 请求用户信息
    async getUserInfo () {
      const res = await getUserInfo()
      this.userInfo = res.data.data
    },
    // 文件选择方法  头像更换
    async onFileChange (ev) {
      if (ev.target.files.length === 0) return // 防止用户未选择图片
      const fd = new FormData()
      fd.append('photo', ev.target.files[0]) // photo在表单里参数名携带
      try {
        const res = await changeUserPhoto(fd) // 500了
        this.userInfo.photo = res.data.data.photo
      } catch (err) {
        Toast.fail({
          message: '无法更新',
          duration: 1000
        })
      }
    },
    // 更新名字
    async updateName () {
      await updateUserInfo(this.userInfo.name)
    },
    // 更新生日
    async updateBirthday () {
      await updateUserInfo(this.userInfo.name, this.currentDate.toLocaleDateString().replace(/\//g, '-'))
      this.userInfo.birthday = this.currentDate.toLocaleDateString().replace(/\//g, '-')
      this.isShowBirthday = false
    },
    backFn () {
      this.$router.back()
      this.$bus.$emit('updateName', this.userInfo.name)
    }
  }
}
</script>

<style lang="less" scoped>
.user-edit-container {
  padding-top: 46px;
  .avatar {
    width: 50px;
    height: 50px;
  }
}
.van-nav-bar {
  position: fixed;
}
.name-input {
  padding: 8px 0;
  text-align: center;
  input {
    width: 150px;
    border: 0;
  }
}
</style>
